<script setup lang="ts">
import { shallowRef } from 'vue'
import BlockHead from './block-head.vue'

import row1 from './row-bg-1.png'
import row2 from './row-bg-2.png'

defineOptions({
  name: 'ItemSix',
})

const props = defineProps<{
  data: { name: string, value1: string, value2: string, content: string }[]
}>()

const data = shallowRef<{ name: string, value: string, yoy: string, remark: string }[]>([])

watchEffect(() => {
  data.value = props.data.map((v) => {
    return {
      name: v.name,
      value: v.value1,
      yoy: v.value2,
      remark: v.content,
    }
  })
})
</script>

<template>
  <div class="w-full flex flex-auto flex-col">
    <BlockHead title="峰谷平用电策略" />
    <div class="block-body h-46 w-full flex-auto">
      <div class="h-full w-full px-3 py-2">
        <ElTable
          :data="data" height="100%" :row-style="{
            backgroundColor: 'transparent',
            backgroundImage: `url(${row2})`,
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover',
          }" :header-row-style="{
            backgroundColor: 'transparent',
            backgroundImage: `url(${row1})`,
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover',
          }" :cell-style="{
            backgroundColor: 'transparent',
            color: 'rgba(192, 231, 255, 1)',
          }" :header-cell-style="{
            backgroundColor: 'transparent',
            color: 'rgba(192, 231, 255, 1)',
          }"
          header-cell-class-name="text-sm"
          tooltip-effect="light"
          class="text-sm"
        >
          <ElTableColumn label="时段" prop="name" align="center" show-overflow-tooltip />
          <ElTableColumn label="电量（kw）" prop="value" align="center" width="120" show-overflow-tooltip>
            <template #default="scope">
              <div class="font-pmzd">
                {{ scope.row.value }}
              </div>
            </template>
          </ElTableColumn>
          <ElTableColumn label="成本占比" prop="yoy" align="center" width="100" show-overflow-tooltip>
            <template #default="scope">
              <div class="font-pmzd">
                {{ scope.row.yoy }}
              </div>
            </template>
          </ElTableColumn>
          <ElTableColumn label="优化建议" prop="remark" align="center" show-overflow-tooltip />
        </ElTable>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.block-body {
  @for $i from 1 through 3 {
    .xh-item-#{$i} {
      background: url('./rank-bg-#{$i}.png') no-repeat;
      background-size: cover;
      background-position: center center;
    }
  }

  :deep(.el-scrollbar__wrap) {
      outline: none !important;
  }
}
</style>
